<template>
        <div class="logo">

        </div>

        <div>
                <h1>less</h1>
        </div>
        <h1>app</h1>
        <div class="dv1">
                <h1>dv1</h1>
        </div>
        <div class="dv2">
                <h1>dv2</h1>
        </div>
        <div class="dv3">
                <h1>dv3</h1>
                <h4 class="hh">
                    div4
                <i>lllll</i>
                </h4>
        </div>


        <!-- <router-link to="/login">登入</router-link>
   | -->
        <bread :data="data" separator="/"></bread>
        <!--separator="/" 分隔符-->
        <router-view></router-view>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'

let data = ref([])
// 再setup如何使用eventBus
//2. reactive声 明的变量重新赋值,丢失响应
//3.如何获取全局的properties属性
//4.全局创建组件，简单封装面包屑
onMounted(() => {
        // console.log(getCurrentInstance());
        // console.log(getCurrentInstance().ctx);
        let instance = getCurrentInstance()

        //获取app全局添加属性        
        let $bus = instance.appContext.config.globalProperties.$bus;

        $bus.$on('breadChange', input => {
                // bus注册了事件breadChange
                console.log(input, '121');
                data.value = input;
                console.log(data.value, '111');
                // 传参后赋值
        })
})
// console.log(import.meta.env,"123");
</script>

<style lang="less" scoped>
@import "./assets/text.less";
// less变量声明
.logo {
        svg {
                width: 20em;
                height: 20em;
        }
}

.dv1 {
        background-color: aqua;
        color: black;
}

.dv2 {
        // 混合写法
        color: rgb(236, 86, 56);
        .dv1()
}

.dv3 {
        .hh{
                color: blue;

                i {
                        font-size: 20px;
                }
        }
}
</style>